/*
 * @Author: hyman
 * @Date: 2022-02-10 10:52:08
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-16 11:11:33
 * @Description: 请填写简介
 */
import React from 'react'
import styles from './contactadd.scss'
import { Toast, Form,Input,Button, Radio,Space, TextArea, Dropdown } from 'antd-mobile'
import { useNavigate, useSearchParams} from 'react-router-dom'
import { pcaa } from 'area-data'; // v3 or higher
import 'react-area-linkage/dist/index.css'; // v2 or higher
import { AreaCascader } from 'react-area-linkage';
import cookie from 'react-cookies'

const Contact = () => 
{   
    const LoginUser = cookie.load('LoginUser')
    const [tylelist, setTylelist] = React.useState([]); 
    const [typeid, setType] = React.useState('1')
    const [typetitle, setTypetitle] = React.useState('请选择')
    const ref = React.createRef()
    const [region, setRegion] = React.useState([])
    let navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const typeids = searchParams.get('typeid')

    const [form] = Form.useForm()

    const submit = async(values)=>{
        values.typeid = typeid
        values.region = region
        values.userid = LoginUser.id
        values.gender = values.gender ? values.gender : '0'
        values.remark = values.remark ? values.remark : ''
        let result = {}
        if(typeids){
            values.id = typeids
            result = await React.$api.contactUpdate(values)
        } else{
            result = await React.$api.addcontact(values)
        }
        if(result.code  == '0'){
            Toast.show({
                content: result.msg,
              })
            return false;
        }
        Toast.show({
            content: result.msg,
          })
        navigate('/')

    }

    const selectedChange = (e) => {

        //将确认的结果 分别给到省市区
        let [province, city, district]  = e
        // console.log(Object.values(province)[0])
        var region = []
        
        if (province) {
           region.push(Object.keys(province)[0])
        }

        if (city) {
           region.push(Object.keys(city)[0])
        }

        if (district) {
           region.push(Object.keys(district)[0])
        }
        // console.log(region)
        setRegion(region)
    }

    React.useEffect(() => {

        async function fetchData(){
          let result = await React.$api.contacttype()
            if(result.code  == '1'){
                setTylelist(result.data)
            }
        
        }
        fetchData()

        async function infoData(){
            let data ={
                typeid: typeids
            }
            if(typeids){
                var res = await React.$api.contactInfo(data)
                    if(res.code  == '1'){
                        let data = res.data
                        setRegion(data.region)
                        setType(data.typeid)
                        setTypetitle(data.type.name)
                        form.setFieldsValue(data)
                        
                    }
            }
        }
        infoData()
    }, [])
    
    const changeType = (data) => {
        setType(data.id)
        setTypetitle(data.name)
        // 关闭下拉菜单
       ref.current?.close()
    }

    return (
        <>
            {/* <!-- 信息录入 --> */}
            <div className="contacts">
                <div className="info">
                    <h3 className="title wow fadeInUp">信息录入</h3>

                    <p className="desc wow fadeInUp" data-wow-delay="200ms">
                        您可在本页录入您的联系信息，录入成功后名片将会出现在首页。如需修改首页名片信息，也请新建录入，将会自动替换原有名片。
                    </p>
                </div>
            </div>

            
            {/* <!-- 表单结构 --> */}
            <div className="profile">
                <Form onFinish={submit} form={form}>
                    <Form.Item name='nickname' label='姓名' rules={[{ required: true, message: '姓名不能为空' }]}>
                        <Input type="text" placeholder='请输入姓名' />
                    </Form.Item>

                    <Form.Item name='phone' label='手机号码' rules={[{ required: true, message: '手机号码不能为空' }]}>
                        <Input type="text" placeholder='请输入手机号码' />
                    </Form.Item>

                    <Form.Item name='gender' label='性别'>
                        <Radio.Group defaultValue='0'>
                            <Radio  value='0'>保密 &nbsp;</Radio>
                            <Radio  value='1'>男 &nbsp;</Radio>
                            <Radio  value='2'>女</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item name='region' label='地区选择' >
                        <AreaCascader type="all" defaultArea={region}  onChange={selectedChange} level={1} data={pcaa} />
                    </Form.Item>

                    
                    <Form.Item name='typeid' label='分类' >
                        <Dropdown ref={ref}>
                            <Dropdown.Item key='sorter' title={typetitle}>
                                <div style={{ padding: 12 }}>
                                <Radio.Group defaultValue='1'  onChange={changeType} value={typeid} >
                                    <Space direction='vertical' block className="contacttype">
                                        {
                                            tylelist.map((item, index) =>{
                                                return(
                                                    <Radio key={item.id} block value={item}>
                                                        {item.name}
                                                    </Radio>
                                                )
                                            })
                                        }
                                    </Space>
                                </Radio.Group>
                                </div>
                            </Dropdown.Item>
                        </Dropdown>
                    </Form.Item>

                    <Form.Item name='remark' label='备注' >
                        <TextArea placeholder='请输入备注' showCount maxLength={50} rows={1} />
                    </Form.Item>

                    <div className="action">
                        <Button block shape='rounded' color="primary" class="btn" type='submit'>
                            {typeids ? '修改' : '新建'}
                        </Button>
                    </div>
                </Form>
            </div>
        </>
    )
}

export default Contact